﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>PoorMansTSqlFormatterJS Demo Harness</title>
    <meta name="description" content="This is a simple demo page for the PoorMansTSqlFormatterJS library - more complete site at http://poorsql.com/">

    <link href="DemoSupportFiles/minimal.css" rel="stylesheet">
    <script src="DemoSupportFiles/jquery-1.5.2.min.js"></script>
    <script src="DemoSupportFiles/formattingengine.js"></script>

    <script>
        var PageService = function () {
            var EnableUI = function () {
                $("#inputString").removeAttr("disabled");
                $("#inputString").change(inputChanged);
                $("#inputString").blur(inputChanged);
            }

            var inputChanged = function () {
                SetOutputPanelContent("Getting formatted SQL, please wait...");
                DoFormat();
            }

            var DoFormat = function () {
                JsFormattingEngine.RequestFormatting("inputString=" + encodeURIComponent($("#inputString").val()) + "&expandCommaLists=true&trailingCommas=true&spaceAfterExpandedComma=false&expandBooleanExpressions=true&expandCaseStatements=true&expandBetweenConditions=true&expandInLists=true&breakJoinOnSections=false&uppercaseKeywords=true&coloring=true&keywordStandardization=false&randomizeColor=false&randomizeLineLengths=false&randomizeKeywordCase=false&preserveComments=false&enableKeywordSubstitution=false&formattingType=standard&indent=%5Ct&spacesPerTab=4&maxLineWidth=999&statementBreaks=2&clauseBreaks=1&language=&jsengine=true&reFormat=true&obfuscate=false");
            }

            //var inputKeyEventFireFormat = function () {
            //    doFormatInPlace();
            //    formatToOutDiv();
            //}

            var SetOutputPanelContent = function (outputData) {
                $("#outputDiv").html(outputData);
            }

            var NotifyFormattingResult = function (formattingResult) {
                //TODO: add safety here, against race conditions etc.
                SetOutputPanelContent(formattingResult.outputSqlHtml);
            }

            var CheckSettings = function () {
                if ($("#formatAsYouGo:checked").val())
                    $('#inputString').keyup(DoFormat)
                else
                    //untested...
                    $("#inputString").keyup(null);
            }

            var formatToOutDiv = function () {
                setOutput(formattedText);
            }

            var doFormatInPlace = function () {
                if (formatInPlace) {
                    var tokenizedData = tokenizer.TokenizeSQL(inputData);
                    var parsedData = parser.ParseSQL(tokenizedData);
                    var formattedText = textFormatter.FormatSQLTree(parsedData);

                    $("#inputString").val(formattedText);
                }
            }


            return {
                EnableUI: EnableUI,
                SetOutputPanelContent: SetOutputPanelContent,
                NotifyFormattingResult: NotifyFormattingResult,
                CheckSettings: CheckSettings
        };
        }();

    </script>
    <script>
        $(function () {
            var minflag = false;
            var debugflag = false;

            var scriptURLList = [
                'JSLibReference/' + (debugflag ? "Debug/" : "Release/") + 'PoorMansTSqlFormatterJS.' + (minflag ? "min." : "") + 'js',
                'DemoSupportFiles/formattingmapper.js'
            ];

            $("#formatAsYouGo").change(PageService.CheckSettings);
            PageService.CheckSettings();

            //TODO: not implemented yet!!
            var formatInPlace = false;

            JsFormattingEngine.LoadEnvironment(
              document.location.href.split("?")[0].replace('DemoPage.html', ''),
              'DemoSupportFiles/formattingworker.js',
              scriptURLList,
              function () { PageService.EnableUI(); },
              function (paramLength, outputString) { PageService.SetOutputPanelContent(outputString); },
              function (errorMessage) { PageService.SetOutputPanelContent("Error: " + errorMessage); }
            );

        });
    </script>
</head>
<body>
    <header>
        <span class="logo">PoorMansTSqlFormatterJS Demo Harness
        </span>
        <nav class="float-right">
            <ul>
                <li><label><input type="checkbox" name="EnableFormatAsYouGo" id="formatAsYouGo" /> Format as-you-go</label></li>
                <li><label><input type="checkbox" name="EnableInPlaceFormat" id="inPlaceFormat" disabled="disabled" /> In-place format</label></li>
            </ul>
        </nav>
    </header>
    <div class="row">
        <div class="col-6">
            <textarea name="inputString" id="inputString" style="width: 100%; height: 80vh; padding: 2px; border: 1px solid; " disabled="disabled"></textarea>
        </div>
        <div class="col-6">
            <div id="outputDiv" style="height:80vh; padding: 2px; border: 1px solid; overflow: scroll;">
            </div>
        </div>
    </div>
</body>
</html>